<template>
  <div
    class="flex flex-center flex-column top-theme"
    :style="{
      height,
      background: `url(${comBg}) no-repeat center/cover`
    }">
    <h3>{{ title }}</h3>
    <p>{{ des1 }}</p>
    <p>{{ des2 }}</p>
  </div>
</template>

<script>
export default {
  name: 'TopTheme',
  computed: {
    // 处理背景图
    comBg() {
      return this.$utils.getImg(this.bg)
    }
  },
  props: {
    bg: {
      type: String,
      default: ''
    },
    height: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    des1: {
      type: String,
      default: ''
    },
    des2: {
      type: String,
      default: ''
    }
  }
}
</script>
<style lang="scss" scoped>
.top-theme {
  text-align: center;
  font-size: 22px;
  color: #fff;
  h3 {
    margin-bottom: 25px;
    font-size: 44px;
  }
  & > p {
    font-size: 22px;
    line-height: 34px;
  }
}
</style>
